// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { NativeEventEmitter, ScrollView, TextInput, NativeModules, Platform, StyleSheet, Text, View, Image, TouchableOpacity, Alert, Switch, ImageBackground } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import axios from 'axios';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';

// antd 按需加载
import { Tabs, Toast, Portal } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { positionHistory } from '../../module/module.js'

// 引入样式
import Style from './style.js';

// 引入公用组件
import { Layout, NavBar, Title, NetInfoScene, Results, RefreshScrollView, ScrollableTabBar, RnFlatList } from '../../components/index.js'

// 引入专用组件
import { } from './components/index.js'

// 引入工具包

import { nblogo, classDefault } from '../../util/images.js'
import { size, longitude, latitude, ScreenWidth } from '../../util/utils.js'


class PositionHistory extends Component {

  constructor(props) {
    super(props)
    this.state = {
      refreshing: false,
      loading: false,
      dataList: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
        pages: 1,
        list: []
      }
    }

  }
  componentDidMount() {
    // InteractionManager.runAfterInteractions(() => {
    // ...耗时较长的同步的任务...
    this.loading = Toast.loading('加载中', 0)
    this.handleData().finally(() => { Portal.remove(this.loading) })
    // });
  }

  handleData(options) {
    const { userId, exchangeId } = this.props
    const { dataList: { pageNum, pageSize } } = this.state
    return new Promise((resolve, reject) => {
      positionHistory({
        userId,
        exchangeId,
        status: 2,
        pageNum,
        pageSize,
        ...options
      }).then(res => {
        console.log(res)
        console.log(res.data.list)
        resolve(res)
        this.setState({
          dataList: {
            ...res.data,
            list: this.state.dataList.list.concat(res.data.list)
          }
        })
      }).catch(error => {
        reject(error)
      })
    }).catch(error => {
    })
  }

  onRefresh = () => {
    this.setState({ refreshing: true });
    const { data } = this.props
    const { dataList: { pageSize } } = this.state
    this.setState({
      dataList: {
        total: 0,
        pageSize: 10,
        pageNum: 1,
        pages: 1,
        list: []
      }
    }, () => {
      this.handleData().finally(() => { this.setState({ refreshing: false }) })
    })
  }

  onEndReached = () => {
    const { dataList: { pageNum, pageSize, list, total } } = this.state
    if (list.length < total) {
      this.setState({ dataList: { pageSize, list, total, pageNum: pageNum + 1 } }, () => {
        this.handleData()
      })
    }
  }


  render() {
    const { userId, exchangeId } = this.props
    const { refreshing, dataList } = this.state
    return (
      <Layout style={{ backgroundColor: '#0A0C21' }} statusStyle={{}}>
        <NavBar
          type="transparent"
          title="持仓历史"
          back={true}
        />
        <ScrollView>
          <RnFlatList
            style={{
              flex: 1,
            }}
            refreshing={refreshing}
            onRefresh={this.onRefresh}
            onEndReached={this.onEndReached}
            removeClippedSubviews={true}
            data={dataList}
            renderItem={({ item }) => {
              return (
                <TouchableOpacity onPress={() => Actions.positionDetails({ id: item.id, userId, exchangeId })}>
                  <View style={{ marginHorizontal: 12, borderRadius: 8, overflow: 'hidden', backgroundColor: '#334185', paddingTop: .5, marginTop: 16, marginBottom: 8 }}>
                    <View style={{ backgroundColor: '#181E3A', }}>
                      <View style={{ backgroundColor: '#232B54', borderRadius: 8, }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingTop: 12, paddingHorizontal: 12 }}>
                          {item.direction == 'buy' && (
                            <View style={{ paddingHorizontal: 8, paddingVertical: 3, backgroundColor: '#00C898', }}>
                              <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>单{item.buyMultiple || 0}倍</Text>
                            </View>
                          )}
                          {item.direction == 'sell' && (
                            <View style={{ paddingHorizontal: 8, paddingVertical: 3, backgroundColor: '#FF5757', }}>
                              <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>空{item.sellMultiple || 0}倍</Text>
                            </View>
                          )}
                          <Text style={{ flex: 1, fontSize: 14, color: '#fff', lineHeight: 20, marginLeft: 12 }}>{item.symbol} {item.contractType}</Text>
                          <View style={{ paddingHorizontal: 8, paddingVertical: 3, backgroundColor: '#7484FF', borderRadius: 2, }}>
                            {item.status == 1 && (
                              <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>持</Text>
                            )}
                            {item.status == 2 && (
                              <Text style={{ fontSize: 10, color: '#fff', lineHeight: 14, }}>平</Text>
                            )}
                          </View>
                        </View>
                        <View style={{ flexDirection: 'row', alignItems: 'center', paddingVertical: 16 }}>
                          <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                            <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>总资产</Text>
                            <Text style={{ fontSize: 14, color: '#00C898', lineHeight: 20, }}>${item.profit}</Text>
                          </View>
                          <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                            <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>收益率</Text>
                            <Text style={{ fontSize: 14, color: '#00C898', lineHeight: 20, }}>{item.profitRate }%</Text>
                          </View>
                        </View>
                      </View>
                    </View>
                    <View style={{ backgroundColor: '#181E3A', height: 65, flexDirection: 'row', alignItems: 'center', }}>
                      <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>最大持仓量</Text>
                        <Text style={{ fontSize: 14, color: '#FFFFFF', lineHeight: 20, }}>{item.volume}</Text>
                      </View>
                      <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>最大保证金</Text>
                        <Text style={{ fontSize: 14, color: '#07C69A', lineHeight: 20, }}>${item.positionMargin}</Text>
                      </View>
                      <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }}>
                        <Text style={{ fontSize: 12, color: '#8A90A8', lineHeight: 17, marginBottom: 4 }}>保证金率</Text>
                        <Text style={{ fontSize: 14, color: '#07C69A', lineHeight: 20, }}>-</Text>
                      </View>
                    </View>
                  </View>
                </TouchableOpacity>
              )
            }}
          />
        </ScrollView>
      </Layout>
    );
  }
}

export default connect(({ userInfo, }) => ({
  userInfo,
}))(pureRender(PositionHistory))
